<template>
<!-- 组件化思想：把一个完整的页面，拆成一个一个的小组件 -->
<!-- 每一个组件内部都有结构、样式、行为 -->
<!-- template就是vue组件中的结构部分 -->
<!-- template一定要有有且只有一个根元素(div标签) -->

  <div>
    <div class="father">
      <span>我父亲的年纪是{{fatherAge}}岁</span>
      <div class="son">我是{{30 > sonAge ? '人到中年不得已' : '还年轻继续奋斗'}}</div>
    </div>
    <div class="box">{{test.uname.toUpperCase()}}</div>
    <div class="box">{{test.age * 2}}</div>
    <!-- 插值表达式中不能写if和for语法 -->
    <!-- <div class="box">{{if(test.age === 12) {123} }}</div> -->
  </div>
</template>

<script>
//script这部分就是行为部分,js代码写在这里(正常情况下不写这样的代码)
// const a = 2
// console.log(a);
// vue组件的核心代码: 可以导出当前vue组件
export default {
  //vue的组件部分中的配置项,需要大家记下来
  // data属性必须是一个函数,这个函数要return一个对象,这个对象中的数据就是该组件中依赖的数据
  data(){
    return {
      fatherAge:60,
      sonAge:31,
      test: {
        uname:'harry',
        age:12
      }
    }
  }
}
</script>

<style lang='less'>
/* style这部分就是样式部分,css代码写在这里 */
// less在脚手架内部已经配好了设置
// 但是不会脚手架不会帮你安装这个less-loader这个包
// 所以我们需要手动去下载这个包 npm i  less-loader@7.2.1 less -D
  .father {
    color: #087;
    .son {
      color:red
    }
  }
</style>
